<template>
	<view :class="['avatar', sm?'sm':'', lg?'lg':'', llg?'llg':'', circle?'circle':'', zClass]">
		<image class="img" v-if="src" :src="src" mode="aspectFill"></image>
		<text v-else>{{name[0]}}</text>
	</view>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'src':{type:String},
			'name':{type:String},
			'sm':{type:Boolean},
			'lg':{type:Boolean},
			'llg':{type:Boolean},
			'circle':{type:Boolean}
		}
	}
</script>

<style lang="scss">
	.avatar{
		flex: 0 0 3em;
		display: inline-flex;
		background: #e5e5e5;
		width: 3em;
		height: 3em;
		border-radius: 10upx;
		align-items: center;
		justify-content: center;
		color: #fff;
		overflow: hidden;
		.img{
			width: 100%;
			height: 100%;
		}
		&.sm{
			font-size: $font-size-sm;
		}
		&.lg{
			font-size: $font-size-lg;
		}
		&.llg{
			font-size: $font-size-llg;
		}
		&.circle{
			border-radius: 50%;
		}
	}
</style>
